<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<div class="detailImg-box">
					<image src="../../../static/img/detailBg.png" mode="aspectFill"
						style="width: 100vw;height: 112.5vw;position: absolute;z-index: 1;"></image>
					<div class="bird">
						<image src="../../../static/img/detailBorder.png" mode="aspectFill"
							style="width: 82.93vw;height: 82.93vw;position: absolute;z-index: 3;top: 8.53vw;left: 8.53vw;">
						</image>
						<image src="@/static/img/swiper.jpg" mode="aspectFill"
							style="position: absolute;z-index: 2;width: 78.67vw;height: 78.67vw;top: 10vw;left: 10vw;border-radius: 6.4vw;">
						</image>
						<image src="../../../static/img/lookBig.png" mode="aspectFill"
							style="width: 6.4vw;height: 6.4vw;position: absolute;top: 12.8vw;right: 12.8vw;z-index: 6;">
						</image>
					</div>
				</div>
				<div class="radius-box">
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="enter-img" style=""></image>
				</div>
				<div class="info-box">
					<div class="info-top">
						<div class="info-left">
							<image src="../../../static/img/num.png" mode="aspectFill" class="left-img"></image>
							<span class="left-text">2000份</span>
						</div>
						<div class="info-right">
							<image src="../../../static/img/detailEnter.png" mode="heightFix" class="image427"></image>
							<span class="right-text">进行中</span>
						</div>
					</div>

					<span class="info-title">Digital Artwork: Psychedelic Bathroom</span>

					<div class="tag-box">
						<span class="tag-border" v-for="item in 3">LABEL CONTENT</span>
					</div>

					<span class="info-desc">The horns on the head represent the personality and ability. The horns of
						each doll are in different positions and have different colors and shapes.</span>

					<div class="creator-box">
						<div class="creator-left">
							<image src="../../../static/img/swiper.jpg" mode="aspectFill" class="creator-header">
							</image>
							<div class="creator-info">
								<span class="jiu-font28-efe">
									龙灵数藏 <span class="creator-border jiu-font10-a97">创作者</span>
								</span>
								<span class="jiu-font24-555">ID：laimushdihunx1232</span>
							</div>
						</div>
						<div class="creator-btn jiu-font24-000">关注</div>
					</div>

				</div>

				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 附属权益 ··</div>

				<div class="collection-list">
					<div class="collection-item" v-for="item in 6">
						<div class="collection-border" style="background-color: #000;position: relative;">
							<div class="collection-num jiu-font10-a97">×2</div>
							<image src="@/static/img/swiper.jpg" mode="aspectFill" class="collection-img"></image>
						</div>
						<span class="jiu-font24-fff">Digital Artwork:
							Psychedelic…</span>
					</div>
				</div>
				
				<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 合成介绍 ··</div>
				
				<div class="bottomText-box">
					<span class="bottomText-title">关于数字藏品</span>
					<span
						class="bottomText-text">数字藏品是指使用区块链技术，对应特定的作品、艺术品生成的唯一数字凭证，在保护其数字版权的基础上，实现真实可信的数字化发行、购买、收藏和使用。本平台的数字藏品是基于[元创链]技术协议发行的数字商品，每件藏品在[元创链]都有链上唯一标识，限量发行、不可篡改、不可复制。</span>
					<span class="bottomText-title">购买须知</span>
					<span
						class="bottomText-text">数字藏品为虚拟数字商品，并非实物，仅限经实名认证且年满18周岁的中国大陆用户购买。数字藏品的版权归发行方和原创者所有，除另外获得版权拥有者的书面同意外，用户不得将数字藏品用于任何商业用途。</span>
					<span
						class="bottomText-text">请您于10分钟内完成数字藏品支付，本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易、欺诈、或以任何其他非法行为进行使用。</span>
				</div>
			</ma-refresh>
		</ma-body>
	</div>
</template>

<script>
</script>

<style lang="scss">
	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.bird {
		animation: pulse 4s infinite;
		background-color: #1b1b1b;
		z-index: 99;
		position: relative;
	}

	@-webkit-keyframes pulse {
		0% {
			transfor: translateY(0);
		}

		50% {
			transform: translateY(3vw);
		}

		100% {
			transform: translateY(0);
		}
	}

	.detailImg-box {
		position: relative;
		height: 112.53vw;
	}

	.radius-box {
		height: 6.4vw;
		width: 100vw;
		border-radius: 6vw 6vw 0 0;
		background-color: #1b1b1b;
		// position: absolute;
		bottom: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.enter-img {
			width: 4.27vw;
			height: 4.27vw;
			transform: rotate(90deg);
		}
	}

	.info-box {
		display: flex;
		flex-direction: column;
		padding-left: 5.33vw;
		background-color: #1B1B1B;
		padding-bottom: 8.53vw;

		.info-top {
			display: flex;
			justify-content: space-between;
			padding-right: 5.33vw;

			.info-left {
				display: flex;
				background-color: #323232;

				.left-img {
					width: 10.67vw;
					height: 4.27vw;
				}

				.left-text {
					padding: 0.27vw 1.07vw;
					font-size: 2.67vw;
					font-weight: 300;
					color: #FFCE80;
					border-radius: 0 1.07vw 1.07vw 0;
				}
			}

			.info-right {
				display: flex;
				align-items: center;

				.right-text {
					font-size: 3.2vw;
					font-weight: 300;
					color: #A972FF;
					margin-left: 1.07vw;
				}
			}

		}

		.info-title {
			font-size: 5.87vw;
			font-weight: 500;
			color: #ffffff;
			margin-top: 2.13vw;
		}

		.tag-box {
			display: flex;
			flex-wrap: nowrap;
			margin-top: 2.13vw;

			.tag-border {
				padding: 0.27vw 1.07vw;
				border: 1px solid #A972FF;
				font-size: 2.67vw;
				font-weight: 300;
				color: #A972FF;
				margin-right: 1.07vw;
				border-radius: 1.07vw;
			}
		}

		.info-desc {
			margin-top: 6.4vw;
			font-size: 3.2vw;
			font-weight: 300;
			color: #555555;
			padding-right: 5.33vw;
		}

		.creator-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #000;
			margin-top: 6.4vw;
			padding: 3.2vw 5.33vw 3.2vw 4.27vw;
			border-radius: 12.8vw 0 0 12.8vw;

			.creator-left {
				display: flex;
				align-items: center;

				.creator-header {
					width: 10.67vw;
					height: 10.67vw;
					border-radius: 50%;
				}

				.creator-info {
					display: flex;
					flex-direction: column;
					margin-left: 2.13vw;

					.creator-border {
						padding: 0vw 1.33vw;
						border: 1px solid #A972FF;
						border-radius: 1.07vw;
						line-height: 4.27vw;
						margin-left: 4.27vw;
					}
				}
			}

			.creator-btn {
				padding: 0 5.33vw;
				line-height: 8.53vw;
				background-color: #A972FF;
				border-radius: 5.33vw;
			}
		}
	}

	.collection-list {
		display: flex;
		flex-wrap: wrap;
		padding: 2.13vw 0vw 8.53vw 5.33vw;
		background-color: #1b1b1b;

		.collection-item {
			display: flex;
			flex-direction: column;
			margin-top: 4.27vw;
			margin-right: 2.4vw;

			.collection-border {
				position: relative;
				padding: 1.07vw;
				width: 28.27vw;
				height: 28.27vw;
				border-radius: 4.27vw;

				.collection-img {
					width: 26.13vw;
					height: 26.13vw;
					border-radius: 4.27vw;
				}

				.collection-num {
					position: absolute;
					bottom: 1.07vw;
					right: 1.04vw;
					z-index: 1;
					width: 12.8vw;
					line-height: 6.4vw;
					text-align: center;
					background-color: #000;
					border-radius: 4vw 0 0 0;
					font-size: 3.2vw;
				}
			}

			.jiu-font24-fff {
				overflow: hidden; 
				text-overflow: ellipsis; 
				display: -webkit-box; 
				-webkit-line-clamp: 2; 
				-webkit-box-orient: vertical;
				width: 26.13vw;
				margin-top: 2.67vw;
			}
		}
	}
	.bottomText-box {
		padding: 2.13vw 5.33vw 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;
	
		.bottomText-title {
			color: #aaaaaa;
			font-size: 3.73vw;
			font-weight: 500;
			margin-top: 4.27vw;
			display: block;
		}
	
		.bottomText-text {
			color: #555555;
			font-size: 3.2vw;
			font-weight: 300;
			margin-top: 2.13vw;
		}
	}
</style>
